<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta
          name="viewport"
          content="initial-scale=1.0, user-scalable=no, width=device-width"
  />
  <link
          rel="stylesheet"
          href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
  />
  <title>地图显示</title>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 90%;
    }
    input {
      width: 200px !important;
      margin: 10px;
    }
    button {
      margin-left: 10px;
    }
  </style>
</head>
<body>
<div>
  <input type="text" placeholder="您在哪儿上车？ " />
  <button class="nowBtn">定位</button>
  <!-- 实战自动定位（这里单击设置假定位数据） -->
</div>

<div>
  <input type="text" placeholder="您要去哪儿？" />
  <button>确定</button>
</div>

<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=4eb50d5b6bc7611a7f6123683d856a25"></script>
<script>
  var map = new AMap.Map("container", {
    resizeEnable: true, //是否监控地图容器尺寸变化
    zoom: 20, //初始化地图层级
    center: [116.397428, 39.90323], //初始化地图中心点
  });

  document.querySelector(".nowBtn").onclick = () => {
    // 1、清除之前的
    map.clearMap();
    // 2 重新打点
    const marker = new AMap.Marker({
      // icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
      content: `<div class="address" style="min-width:140px;text-align:center;display:flex;align-items: center;flex-direction:column">
            <div class="address-title" style="padding:10px;border-radius:100px;background:black;color:#fff;font-size:14px;">千锋教育&nbsp;&nbsp;&gt;</div>
            <div class="address-bottom" style="width:4px;height:15px;background:black;"></div>
        </div>`,
      position: [116.397428, 39.90323],
      anchor: "bottom-center",
    });
    map.add(marker);
  };
</script>
</body>
</html>
